<template>
    <div ref="editor">
    </div>
</template>
<script setup>
import {ref,onMounted,watch} from 'vue'
import monaco from 'vs/editor/editor.main'
const editor=ref(null)
let monacoEditor=null
const emit=defineEmits(['save','change','update:modelValue'])
const props=defineProps({
  modelValue: String,
  language:{
    default:'javascript'
  },
  value:{
    default:' '
  },
  options:{
    default:function () {
      return {
        automaticLayout:true
      }
    }
  }
})
function initEditor(){
  let opt= props.options;
  opt.value=props.modelValue;
  opt.language=props.language
  monacoEditor = monaco.editor.create(editor.value,opt);
  monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, (v)=> {
    emit("save",monacoEditor.getValue())
  })
  monacoEditor.getModel().onDidChangeContent((event) => {
    let v=monacoEditor.getValue()
    emit("update:modelValue",v)
    emit("change",v)
  });
}
function save(){
  emit("save",monacoEditor.getValue())
}
onMounted(()=>{
  let language=this.language;
  if(language=='nginx'){
    require(['js/vs/language/nginx/nginx.js'],(r)=>{
      r.register(monaco);
      initEditor()
    })
  }else{
    initEditor()
  }
})
watch(()=>props.modelValue,(v,per)=>{
  if(monacoEditor){
    let cv=monacoEditor.getValue()
    if(cv!=v){
      monacoEditor.getModel().setValue(v);
    }
  }
})
defineExpose({save})
</script>
<!--
<script>
  // let monaco=require('vs/editor/editor.main');
    export default {
        props:{
            language:{
                default:'javascript'
            },
            value:{
              default:' '
            },
            options:{
                default:function () {
                    return {
                        automaticLayout:true
                    }
                }
            }
        },
        data(){
            return {
               editor:null
            }
        },
        watch:{
            value(nv,ov) {
                if(this.editor){
                    this.editor.getModel().setValue(nv);
                }
            }
        },
        mounted(){
            let language=this.language;
            if(language=='nginx'){
                load(['js/vs/language/nginx/nginx.js'],(r)=>{
                    r.register(monaco);
                    this.initEditor()
                })
            }else{
                this.initEditor()
            }
            //load(['vs/editor/editor.main'],(monaco)=>{

           // })
        },methods:{
            initEditor(){
                let opt= this.options;
                opt.value=this.value;
                opt.language=this.language
                this.editor = monaco.editor.create(this.$refs.editor,opt);
                this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, (v)=> {
                    this.$emit("save",this.editor.getValue())
                })
            },
            save(){
               // this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, (v)=> {
                    this.$emit("save",this.editor.getValue())
               // })
            }
        }
    }
</script>-->
